<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 2. 使用子组件的时候，写一个自定义事件，事件名 setmsg -->
        <!-- 当子组件通过 emit 触发 setmsg 时会执行 getMessage 函数 -->
        <box @setmsg="getMessage"></box>
    </div>
</body>
<script>
    const app = Vue.createApp({
        setup (props, context) {


            // 1. 在父组件中定义一个接收参数的函数
            function getMessage (value) {
                console.log('父组件收到数据了：', value);
            }

            return {
                getMessage
            }
        },
    })

    app.component('box', {
        template: `<div>
            拼搏到无能为力    
            <button @click='changMsg'>给父组件传递数据</button>
        </div>`,
        setup (props, context) {

            function changMsg () {
                // 3. 调用 emit 来触发 setmsg
                // this.$emit  因为 this 指向是 window,所以这里无法使用 this.$emit
                // 触发自定义事件，给父组件传递数据用的
                context.emit('setmsg', {
                    name: '高举',
                    age: 18
                })
            }

            return {
                changMsg
            }
        }


    })
    app.mount('#app')
</script>

</html>